<template>
    <el-container style="height: calc(100vh); width: auto; border: 1px solid #eee">
      <!-- 头部 -->
      <el-header style=" text-align: right; font-size: 12px">
        <span style="float: left; font-size: 1.875rem;font-family: PingFang SC;">element成绩管理</span>
        <el-dropdown>
          <el-button icon="el-icon-user">
            {{this.name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" @click="true ">
            <el-dropdown-item ><samp  @click="xgmm">修改密码</samp></el-dropdown-item>
            <el-dropdown-item ><span @click="logout">注销</span<></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 头部 -->
      <el-container>
        <!-- 导航 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <!-- el-menu标签加 :default-active="$router.path" router="router" 路由直接用index跳转 -->
          <el-menu default-active="/main/stuguanli" class="menu" :default-active="$router.path" router="router">
            <el-submenu index="1" v-if="teacher||admin">
              <template slot="title"><i class="el-icon-document-copy" ></i>成绩管理</template>
              <el-menu-item-group>
                <el-menu-item index="/main/classcourse">班级成绩录入</el-menu-item>
                <el-menu-item index="/main/selfcourse">个人成绩录入</el-menu-item>
                <el-menu-item index="/main/classgrade">班级成绩查询</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3" v-if="teacher||admin" >
              <template slot="title" ><i class="el-icon-setting"></i>信息管理</template>
              <el-menu-item-group>
                <el-menu-item index="/main/coursegl">课程管理</el-menu-item>
                <el-menu-item index="/main/classgl">班级管理</el-menu-item>
                <el-menu-item index="/main/teacher">教师管理</el-menu-item>
                <el-menu-item index="/main/stuguanli">学生管理</el-menu-item>
                <el-menu-item index="/main/select">部门管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5" v-if="student">
              <template slot="title" ><i class="el-icon-document-copy"></i>成绩查询</template>
              <el-menu-item-group>
                <el-menu-item index="/main/selfgrade">个人成绩</el-menu-item>
                <el-menu-item index="/main/selfclassgrade">班级成绩</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 导航 -->

        <!-- 内容 -->
        <el-main>

          <router-view></router-view>
          <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="rle" label-width="100px">
              <el-form-item label="旧密码" prop="pass">
                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码" prop="pass2">
                <el-input type="password" v-model="ruleForm.pass2" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="qx">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-main>

        <!-- 内容 -->
      </el-container>
    </el-container>

</template>

<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入旧密码'));
        } else {
          callback();
        }
      };

      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入的新密码'));
        } else {
          callback();
        }
      };
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请确认你输入的新密码'));
        } else if (value !== this.ruleForm.pass2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        name:'',
        admin: undefined,
        teacher: undefined,
        student: undefined,
        title: '修改密码',
        dialogVisible: false,
        ruleForm: {
          pass: '',
          checkPass: '',
          pass2: ''
        },
        activeIndex2: '1',
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          pass2: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass3,
            trigger: 'blur'
          }],

        },
      }
    },
    methods: {
      logout() {
        this.$confirm('是否要注销登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$ajax.post('logout', {}).then(res => {
            var result = res.data;
            if (result.success) {
              window.sessionStorage.removeItem("token");
              window.sessionStorage.removeItem("name");
              window.sessionStorage.removeItem('roles')
              this.$router.replace('/');
            }
          })
        })
      },
      logout1() {
        this.$confirm('密码修改成功是否重新登录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          this.$ajax.post('logout', {}).then(res => {
            var result = res.data;
            if (result.success) {
              window.sessionStorage.removeItem("token");
              window.sessionStorage.removeItem("name");
              window.sessionStorage.removeItem('roles')
              this.$router.replace('/');
            }
          })
        })
      },
      role() {
        for (let idx in this.roles) {
          let role = this.roles[idx];
          if (role === "ROLE_STUDENT") {
            return this.student = true
          } else if (role === "ROLE_ADMIN") {
            return this.admin = true
          } else {
            return this.teacher = true
          }
        }
      },
      xgmm() {
        this.dialogVisible = true
      },
      qx() {
        this.ruleForm = {
          pass: '',
          checkPass: '',
          pass2: ''
        }
        this.dialogVisible = false
      },
      submitForm(ruleForm) {
        this.$refs.rle.validate(valid => {
          if (valid) {
            this.$ajax.post('password/save', this.ruleForm).then(res => {
              var result = res.data;
              if (result.success) {
                this.dialogVisible = false;
              this.logout1()

              } else {
                this.$notify.error({
                  title: '提示',
                  message: '密码修改失败，请重新修改',
                })
              }
            })

          }

        })
      },

    },
    created() {
      this.name = window.sessionStorage.getItem("name");
      this.roles = window.sessionStorage.getItem("roles");
      this.roles = this.roles.split(",");
      this.password = window.sessionStorage.getItem("password");
      this.role();
    }
  };
</script>

<style scoped\>
  .el-header {
    background-color:#E1EFEF;
    color: #333;
    line-height: 60px;
  }
  .menu{
    height: 100%;
  }
  .el-aside {
    color: #333;
  }



  html,
  body,
  #app,
  .el-container {
    padding: 0px;
    margin: 0px;
    height: 100%;
  }
</style>
